const {Card, Button,Input, Select, Icon,TreeSelect,DatePicker} = antd;
const { MonthPicker, RangePicker } = DatePicker;
const Option = Select.Option;
const TreeNode = TreeSelect.TreeNode;

const dateFormat = 'YYYY/MM/DD';

class SearchBox extends React.Component {
    state = {
        value: undefined,
    }
    onChange = (value) => {
        console.log(value);
        this.setState({ value });
    }

    render() {
        return (
            <Card

                type="inner"
                title="查询条件"
                extra={
                    <div  style={{position: 'absolute',width:"100px",right:"20px",top:"11px"}}>
                        <Button.Group size="small" >
                            <Button type="primary">查询</Button>
                            <Button>导出</Button>
                        </Button.Group>
                    </div>
                    }
            >
                <div>
                    <div style={{ width: "200px",float:"left"}}>
                        <Input addonBefore="客户名称" defaultValue="" placeholder="请输入客户姓名" />

                    </div>
                    <div style={{ width: "200px",float:"left",marginLeft:"10px"}}>
                        <TreeSelect
                            showSearch
                            style={{ width: 200 }}
                            value={this.state.value}
                            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                            placeholder="请选择项目"
                            allowClear
                            treeDefaultExpandAll
                            onChange={this.onChange}
                        >
                            <TreeNode value="parent 1" title="parent 1" key="0-1">
                                <TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
                                    <TreeNode value="leaf1" title="my leaf" key="random" />
                                    <TreeNode value="leaf2" title="your leaf" key="random1" />
                                </TreeNode>
                                <TreeNode value="parent 1-1" title="parent 1-1" key="random2">
                                    <TreeNode value="sss" title={<b style={{ color: '#08c' }}>sss</b>} key="random3" />
                                </TreeNode>
                            </TreeNode>
                        </TreeSelect>

                    </div>

                    <div style={{ width: "250px",float:"left",marginLeft:"10px"}}>
                        <RangePicker
                            defaultValue={[moment(new Date(), dateFormat), moment(new Date(), dateFormat)]}
                            format={dateFormat}
                        />

                    </div>
                </div>
            </Card>
        );
    }
}